<template>
  <div class="logMain">
    <div class="mainLeft">
      <div >
      <div
        class="leftChild"
        v-for="(item, index) in loggingSelection"
        :key="index"
      >
        <span class="childName">{{ item }}</span>
        <select name="" id="" v-model="selections[index]">
          <option value="operation" selected>操作日志</option>
          <option value=""></option>
        </select>
      </div></div>
      <div class="leftButton"><button>查询</button><button>导出</button></div>
    </div>
    <div class="mainRight">
      <el-table
        :data="serverLog_TableData"
        border
        style="width: 100%; height: 100%"
      >
        <el-table-column type="index" label="" min-width="20">
        </el-table-column>
        <el-table-column prop="Date" label="日期" min-width="40">
        </el-table-column>
        <el-table-column prop="Time" label="时间"> </el-table-column>
        <el-table-column prop="Type" label="类型" min-width="50">
        </el-table-column>
        <el-table-column prop="Logs" label="日志内容"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const loggingSelection = ref(["日志类型", "子类型", "开始时间", "结束时间"]);
const selections = ref(Array(4).fill(""));
const serverLog_TableData = ref([
  {
    Date: "12.15",
    Time: "15：18：18",
    Type: "停止",
    Logs: "自动暂停",
  },
  {
    Date: "12.15",
    Time: "15：18：18",
    Type: "停止",
    Logs: "自动暂停gsdgdsgdghshs ",
  },
]);
</script>
<style scoped>
@import url("./Log_server.less");
</style>